<template>
	<view class="blood-sugar-container">
		<view class="header">
			<view class="title">血糖记录</view>
			<view class="action-btns">
				<button class="btn-secondary" @tap="goToRecordDetail">详细记录</button>
				<button class="add-btn" @tap="addRecord">添加记录</button>
			</view>
		</view>
		
		<!-- 数据统计卡片 -->
		<view class="stat-card">
			<view class="stat-header">
				<text class="stat-title">血糖统计</text>
				<view class="date-filter">
					<text 
						class="filter-item" 
						v-for="(item, index) in dateFilters" 
						:key="index"
						:class="{ active: currentDateRange === item.value }"
						@tap="changeDateRange(item.value)"
					>{{ item.label }}</text>
				</view>
			</view>
			
			<view class="stat-overview">
				<view class="stat-item">
					<text class="stat-value" :class="getValueClass(statistics.average)">{{ statistics.average }}</text>
					<text class="stat-label">平均值(mmol/L)</text>
				</view>
				<view class="stat-item">
					<text class="stat-value" :class="getValueClass(statistics.max)">{{ statistics.max }}</text>
					<text class="stat-label">最高值(mmol/L)</text>
				</view>
				<view class="stat-item">
					<text class="stat-value" :class="getValueClass(statistics.min)">{{ statistics.min }}</text>
					<text class="stat-label">最低值(mmol/L)</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ statistics.count }}</text>
					<text class="stat-label">测量次数</text>
				</view>
			</view>
		</view>
		
		<!-- 血糖趋势图表 -->
		<view class="chart-card">
			<view class="chart-header">
				<text class="chart-title">血糖趋势</text>
				<text class="chart-desc">查看您的血糖变化趋势</text>
			</view>
			
			<view class="chart-container">
				<view class="empty-chart" v-if="chartReady && recordList.length === 0">
					<text>暂无数据，请添加血糖记录</text>
				</view>
				
				<view class="chart-canvas-container" v-if="chartReady && recordList.length > 0">
					<canvas canvas-id="bloodSugarChart" id="bloodSugarChart" class="chart-canvas"></canvas>
				</view>
			</view>
			
			<view class="chart-legend">
				<view class="legend-item">
					<view class="legend-color normal"></view>
					<text class="legend-text">正常（3.9至6.1）</text>
				</view>
				<view class="legend-item">
					<view class="legend-color high"></view>
					<text class="legend-text">偏高（大于6.1）</text>
				</view>
				<view class="legend-item">
					<view class="legend-color low"></view>
					<text class="legend-text">偏低（小于3.9）</text>
				</view>
			</view>
			
			<view class="chart-tips">
				<text class="tip-text">提示：浅绿色区域表示正常血糖范围，点击上方选项切换时间范围查看不同时段的血糖趋势</text>
			</view>
		</view>
		
		<!-- 按时间段统计 -->
		<view class="period-card">
			<view class="period-header">
				<text class="period-title">时段分析</text>
				<text class="period-desc">不同时段血糖平均值</text>
			</view>
			
			<view class="period-content">
				<view class="empty-tip" v-if="periodStatistics.length === 0">
					暂无足够数据进行分析
				</view>
				<view class="period-list" v-else>
					<view class="period-item" v-for="(item, index) in periodStatistics" :key="index">
						<view class="period-name">{{item.type}}</view>
						<view class="period-bar-container">
							<view 
								class="period-bar" 
								:class="getValueClass(item.average)"
								:style="{ width: getBarWidth(item.average) }"
							></view>
						</view>
						<view class="period-value" :class="getValueClass(item.average)">{{item.average}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 异常分析 -->
		<view class="abnormal-card">
			<view class="abnormal-header">
				<text class="abnormal-title">异常分析</text>
				<text class="abnormal-desc">{{currentDateRange}}异常数据分布</text>
			</view>
			
			<view class="abnormal-content">
				<view class="empty-tip" v-if="abnormalStatistics.length === 0">
					暂无足够数据进行分析
				</view>
				<view class="abnormal-pie-container" v-else>
					<canvas canvas-id="abnormalPie" id="abnormalPie" class="abnormal-pie"></canvas>
					<view class="abnormal-legend">
						<view class="legend-item" v-for="(item, index) in abnormalStatistics" :key="index">
							<view class="legend-color" :class="'status-' + item.type"></view>
							<text class="legend-text">{{item.label}}({{item.count}})</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 最近记录列表 -->
		<view class="recent-card">
			<view class="recent-header">
				<text class="recent-title">最近记录</text>
				<text class="view-all" @tap="viewAllRecords">查看全部</text>
			</view>
			
			<view class="record-list">
				<view class="empty-tip" v-if="recordList.length === 0">
					暂无血糖记录，点击右上角添加
				</view>
				<view class="record-item" v-for="(item, index) in recentRecords" :key="index" @tap="viewRecord(item)">
					<view class="record-info">
						<view class="record-time">{{item.date}} {{item.time}}</view>
						<view class="record-value">
							<text class="value" :class="getValueClass(item.value)">{{item.value}}</text>
							<text class="unit">mmol/L</text>
						</view>
					</view>
					<view class="record-meta">
						<view class="record-type">{{getTimeTypeText(item.type)}}</view>
						<view class="record-status" :class="getStatusClass(item.value)">{{getStatusText(item.value)}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 快捷操作区 -->
		<view class="quick-actions">
			<view class="action-card" @tap="addRecord">
				<view class="action-icon">
					<t-icon name="add" size="30" color="#8cc9a1"></t-icon>
				</view>
				<view class="action-text">添加记录</view>
			</view>
			<view class="action-card" @tap="goToRecordDetail">
				<view class="action-icon">
					<t-icon name="view-list" size="30" color="#5b8def"></t-icon>
				</view>
				<view class="action-text">详细记录</view>
			</view>
			<view class="action-card" @tap="goToReminder">
				<view class="action-icon">
					<t-icon name="alarm" size="30" color="#ff6b6b"></t-icon>
				</view>
				<view class="action-text">设置提醒</view>
			</view>
			<view class="action-card" @tap="goToAnalysis">
				<view class="action-icon">
					<t-icon name="chart" size="30" color="#ffbb00"></t-icon>
				</view>
				<view class="action-text">数据分析</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getBloodSugarRecords, getBloodSugarStatistics } from '@/common/api/record.js'
	import dataSyncService from '@/common/services/dataSync.js'
	import { getBloodSugarStore } from '@/common/utils/store-helper.js'
	
	// 获取血糖记录存储
	const bloodSugarStore = getBloodSugarStore()
	
	// 记录列表
	const recordList = ref([])
	// 是否已加载图表
	const chartReady = ref(false)
	// 当前日期范围
	const currentDateRange = ref('week')
	
	// 日期筛选选项
	const dateFilters = ref([
		{ label: '日', value: 'day' },
		{ label: '周', value: 'week' },
		{ label: '月', value: 'month' },
		{ label: '年', value: 'year' }
	])
	
	// 统计数据
	const statistics = ref({
		average: '0.0',
		max: '0.0',
		min: '0.0',
		count: 0
	})
	
	// 时段统计
	const periodStatistics = ref([])
	
	// 异常统计
	const abnormalStatistics = ref([])
	
	// 最近记录
	const recentRecords = computed(() => {
		return recordList.value.slice(0, 5)
	})
	
	// 加载记录
	const loadRecords = async () => {
		uni.showLoading({
			title: '加载中...'
		})
		
		try {
			const res = await getBloodSugarRecords()
			if (res.code === 0) {
				// 从响应中提取记录数组
				const recordsData = res.data.records || res.data
				
				// 处理返回的记录，将数组中的measureTime转为date和time
				const processedRecords = recordsData.map(record => {
					// 如果返回的是measureTime数组，转换为日期和时间字符串
					if (record.measureTime && Array.isArray(record.measureTime)) {
						const [year, month, day, hour, minute] = record.measureTime
						const paddedMonth = String(month).padStart(2, '0')
						const paddedDay = String(day).padStart(2, '0')
						const paddedHour = String(hour).padStart(2, '0')
						const paddedMinute = String(minute).padStart(2, '0')
						
						return {
							...record,
							date: `${year}-${paddedMonth}-${paddedDay}`,
							time: `${paddedHour}:${paddedMinute}`,
							type: record.measureType // 保留原始测量类型编码
						}
					}
					return record
				})
				
				// 更新本地记录列表状态
				recordList.value = processedRecords
				
				// 更新Pinia存储
				if(bloodSugarStore && bloodSugarStore.setRecords) {
					bloodSugarStore.setRecords(processedRecords)
				} else {
					// 添加本地存储备份，保证数据同步
					uni.setStorageSync('bloodSugarRecords', processedRecords)
				}
				
				// 添加调试日志
				console.log('血糖首页加载记录成功，当前记录数：', processedRecords.length)
			}
		} catch (e) {
			// 如果API请求失败，尝试从Pinia或本地存储加载备份数据
			console.error('加载血糖记录失败:', e)
			
			// 从Pinia获取
			if(bloodSugarStore && bloodSugarStore.records) {
				recordList.value = bloodSugarStore.records
				console.log('从Pinia加载血糖记录备份，记录数:', bloodSugarStore.records.length)
			} else {
				// 从本地存储加载
				const localRecords = uni.getStorageSync('bloodSugarRecords') || []
				recordList.value = localRecords
				console.log('从本地存储加载血糖记录备份，记录数:', localRecords.length)
			}
		} finally {
			uni.hideLoading()
		}
	}
	
	// 加载统计数据
	const loadStatistics = async () => {
		try {
			const res = await getBloodSugarStatistics(currentDateRange.value)
			if (res.code === 0) {
				const data = res.data
				
				// 更新基本统计
				statistics.value = {
					average: data.average.toFixed(1),
					max: data.max.toFixed(1),
					min: data.min.toFixed(1),
					count: data.count
				}
				
				// 存储到Pinia
				if(bloodSugarStore && bloodSugarStore.setStatistics) {
					bloodSugarStore.setStatistics(data)
				}
				
				// 更新时段统计
				if (data.typeDistribution) {
					periodStatistics.value = data.typeDistribution.map(item => ({
						type: item.type,
						average: item.average.toFixed(1)
					}))
				}
				
				// 更新异常统计
				if (data.abnormalDistribution) {
					abnormalStatistics.value = data.abnormalDistribution.map(item => {
						let type = 'normal'
						if (item.type === '低血糖') type = 'low'
						if (item.type === '偏高值' || item.type === '高血糖') type = 'high'
						
						return {
							type,
							label: item.type,
							count: item.count
						}
					})
				} else {
					// 如果没有异常分布数据，则根据异常数量创建简易统计
					abnormalStatistics.value = [
						{
							type: 'normal',
							label: '正常',
							count: data.count - data.abnormal
						},
						{
							type: 'high',
							label: '异常',
							count: data.abnormal
						}
					]
				}
				
				// 绘制图表
				if (chartReady.value) {
					drawChart(data)
					drawPieChart()
				}
			}
		} catch (e) {
			console.error('加载统计数据失败:', e)
			
			// 如果API请求失败，尝试从Pinia获取备份统计数据
			if(bloodSugarStore && bloodSugarStore.statistics) {
				const data = bloodSugarStore.statistics
				if(data) {
					// 更新基本统计
					statistics.value = {
						average: data.average?.toFixed(1) || '0.0',
						max: data.max?.toFixed(1) || '0.0',
						min: data.min?.toFixed(1) || '0.0',
						count: data.count || 0
					}
					console.log('从Pinia加载统计数据备份')
				}
			}
		}
	}
	
	// 切换日期范围
	const changeDateRange = (range) => {
		currentDateRange.value = range
		loadStatistics()
	}
	
	// 绘制血糖趋势图表
	const drawChart = (data) => {
		const ctx = uni.createCanvasContext('bloodSugarChart')
		
		// 图表尺寸和边距
		const width = 320
		const height = 200
		const paddingLeft = 40
		const paddingRight = 20
		const paddingTop = 20
		const paddingBottom = 40
		const chartWidth = width - paddingLeft - paddingRight
		const chartHeight = height - paddingTop - paddingBottom
		
		// 清除画布
		ctx.clearRect(0, 0, width, height)
		
		// 获取数据
		let chartData = []
		let labels = []
		
		// 根据当前日期范围使用不同的数据
		if (data.distribution) {
			// 日视图
			chartData = data.distribution.map(item => item.value)
			labels = data.distribution.map(item => item.time)
		} else if (data.trend) {
			// 周/月/年视图
			chartData = data.trend.map(item => item.average)
			labels = data.trend.map(item => item.date || item.month)
		} else {
			return
		}
		
		// 计算数据最大值和最小值，用于确定Y轴范围
		const maxValue = Math.max(...chartData, 10)
		const minValue = Math.min(...chartData.filter(val => val > 0), 3)
		
		// Y轴值范围，确保包含3.9-6.1的正常范围
		const yMin = Math.max(0, Math.floor(minValue) - 1)
		const yMax = Math.ceil(maxValue) + 1
		
		// 计算比例尺
		const xScale = chartWidth / (chartData.length - 1 || 1)
		const yScale = chartHeight / (yMax - yMin)
		
		// 绘制正常范围区域
		const normalMin = 3.9
		const normalMax = 6.1
		
		ctx.fillStyle = 'rgba(140, 201, 161, 0.1)' // 浅绿色半透明
		ctx.fillRect(
			paddingLeft, 
			paddingTop + chartHeight - (normalMax - yMin) * yScale,
			chartWidth,
			(normalMax - normalMin) * yScale
		)
		
		// 绘制坐标轴
		ctx.beginPath()
		ctx.strokeStyle = '#ddd'
		ctx.lineWidth = 1
		
		// x轴
		ctx.moveTo(paddingLeft, paddingTop + chartHeight)
		ctx.lineTo(paddingLeft + chartWidth, paddingTop + chartHeight)
		
		// y轴
		ctx.moveTo(paddingLeft, paddingTop)
		ctx.lineTo(paddingLeft, paddingTop + chartHeight)
		ctx.stroke()
		
		// 绘制水平网格线和Y轴刻度
		ctx.beginPath()
		ctx.strokeStyle = '#eee'
		ctx.lineWidth = 1
		ctx.font = '10px Arial'
		ctx.fillStyle = '#999'
		
		const yStep = Math.ceil((yMax - yMin) / 5)
		for (let i = 0; i <= 5; i++) {
			const y = paddingTop + chartHeight - i * yStep * yScale
			const value = (yMin + i * yStep).toFixed(1)
			
			// 网格线
			ctx.moveTo(paddingLeft, y)
			ctx.lineTo(paddingLeft + chartWidth, y)
			
			// Y轴刻度文字
			ctx.fillText(value, paddingLeft - 25, y + 4)
		}
		ctx.stroke()
		
		// 绘制X轴刻度
		ctx.font = '10px Arial'
		ctx.fillStyle = '#999'
		const labelStep = Math.ceil(labels.length / 7) // 最多显示7个标签
		
		for (let i = 0; i < labels.length; i += labelStep) {
			const x = paddingLeft + i * xScale
			ctx.fillText(labels[i], x - 10, paddingTop + chartHeight + 15)
		}
		
		// 绘制数据线
		ctx.beginPath()
		ctx.strokeStyle = '#5b8def'  // 蓝色线
		ctx.lineWidth = 2
		ctx.lineJoin = 'round'
		
		for (let i = 0; i < chartData.length; i++) {
			// 跳过零值数据点
			if (chartData[i] === 0) continue
			
			const x = paddingLeft + i * xScale
			const y = paddingTop + chartHeight - (chartData[i] - yMin) * yScale
			
			if (i === 0 || chartData[i-1] === 0) {
				ctx.moveTo(x, y)
			} else {
				ctx.lineTo(x, y)
			}
		}
		ctx.stroke()
		
		// 绘制数据点
		for (let i = 0; i < chartData.length; i++) {
			// 跳过零值数据点
			if (chartData[i] === 0) continue
			
			const x = paddingLeft + i * xScale
			const y = paddingTop + chartHeight - (chartData[i] - yMin) * yScale
			
			// 根据血糖值设置不同颜色
			if (chartData[i] < normalMin) {
				ctx.fillStyle = '#5b8def'  // 低值，蓝色
			} else if (chartData[i] > normalMax) {
				ctx.fillStyle = '#ff6b6b'  // 高值，红色
			} else {
				ctx.fillStyle = '#8cc9a1'  // 正常值，绿色
			}
			
			// 绘制圆点
			ctx.beginPath()
			ctx.arc(x, y, 4, 0, Math.PI * 2)
			ctx.fill()
			
			// 绘制数据值
			ctx.fillText(chartData[i].toFixed(1), x - 10, y - 10)
		}
		
		// 执行绘制
		ctx.draw()
	}
	
	// 绘制饼图展示异常分析
	const drawPieChart = () => {
		if (abnormalStatistics.value.length === 0) return
		
		const ctx = uni.createCanvasContext('abnormalPie')
		
		// 饼图尺寸和中心点
		const centerX = 80
		const centerY = 80
		const radius = 60
		
		// 清除画布
		ctx.clearRect(0, 0, 160, 160)
		
		// 计算总数
		const total = abnormalStatistics.value.reduce((sum, item) => sum + item.count, 0)
		
		// 起始角度
		let startAngle = 0
		
		// 绘制每个扇形
		abnormalStatistics.value.forEach(item => {
			const portion = item.count / total
			const endAngle = startAngle + portion * Math.PI * 2
			
			ctx.beginPath()
			ctx.moveTo(centerX, centerY)
			ctx.arc(centerX, centerY, radius, startAngle, endAngle)
			ctx.closePath()
			
			// 根据类型设置不同颜色
			switch(item.type) {
				case 'low':
					ctx.setFillStyle('#5b8def')
					break
				case 'high':
					ctx.setFillStyle('#ff6b6b')
					break
				default:
					ctx.setFillStyle('#8cc9a1')
			}
			
			ctx.fill()
			
			startAngle = endAngle
		})
		
		// 中心白色圆形
		ctx.beginPath()
		ctx.arc(centerX, centerY, radius * 0.6, 0, Math.PI * 2)
		ctx.setFillStyle('#fff')
		ctx.fill()
		
		// 显示总记录数
		ctx.setFontSize(14)
		ctx.setFillStyle('#333')
		ctx.setTextAlign('center')
		ctx.setTextBaseline('middle')
		ctx.fillText('总记录', centerX, centerY - 10)
		ctx.setFontSize(16)
		ctx.setFontWeight('bold')
		ctx.fillText(total.toString(), centerX, centerY + 10)
		
		// 执行绘制
		ctx.draw()
	}
	
	// 获取血糖值状态对应的CSS类名
	const getValueClass = (value) => {
		const val = parseFloat(value)
		if (isNaN(val)) return ''
		
		if (val < 3.9) return 'value-low'
		if (val > 6.1) return 'value-high'
		return 'value-normal'
	}
	
	// 获取血糖时段文本
	const getTimeTypeText = (type) => {
		// 如果已经是文本，直接返回
		if (typeof type === 'string' && !type.match(/^\d+$/)) {
			const typeMap = {
				'beforeBreakfast': '空腹',
				'afterBreakfast': '早餐后',
				'beforeLunch': '午餐前',
				'afterLunch': '午餐后',
				'beforeDinner': '晚餐前',
				'afterDinner': '晚餐后',
				'beforeSleep': '睡前',
				'random': '随机'
			}
			return typeMap[type] || type
		}
		
		// 处理数字类型测量类型
		const numType = parseInt(type)
		switch(numType) {
			case 1: return '空腹'
			case 2: return '午餐前'
			case 3: return '早餐后'
			case 4: return '午餐后'
			case 5: return '晚餐后'
			case 6: return '睡前'
			case 7: return '随机'
			default: return '未知'
		}
	}
	
	// 获取血糖状态文本
	const getStatusText = (value) => {
		const val = parseFloat(value)
		if (val < 3.9) return '偏低'
		if (val > 6.1) return '偏高'
		return '正常'
	}
	
	// 获取血糖状态对应的CSS类名
	const getStatusClass = (value) => {
		const val = parseFloat(value)
		if (val < 3.9) return 'status-low'
		if (val > 6.1) return 'status-high'
		return 'status-normal'
	}
	
	// 计算时段分析柱状图宽度
	const getBarWidth = (value) => {
		const val = parseFloat(value)
		// 设置一个基础宽度，然后根据数值比例进行缩放
		const baseWidth = 40 // 基础宽度的百分比，例如40%
		const factor = val / 10 // 假设血糖最大值约为10
		
		return `${Math.min(90, baseWidth + factor * 50)}%`
	}
	
	// 解析测量时间
	const parseMeasureTime = (measureTime) => {
		if (!measureTime || !Array.isArray(measureTime)) return { date: '', time: '' }
		
		try {
			const [year, month, day, hour, minute] = measureTime
			const paddedMonth = String(month).padStart(2, '0')
			const paddedDay = String(day).padStart(2, '0')
			const paddedHour = String(hour).padStart(2, '0')
			const paddedMinute = String(minute).padStart(2, '0')
			
			return {
				date: `${year}-${paddedMonth}-${paddedDay}`,
				time: `${paddedHour}:${paddedMinute}`
			}
		} catch (e) {
			console.error('解析测量时间失败:', e)
			return { date: '', time: '' }
		}
	}
	
	// 跳转到添加记录页面
	const addRecord = () => {
		uni.navigateTo({
			url: '/pages/record/add'
		})
	}
	
	// 查看所有记录
	const viewAllRecords = () => {
		uni.navigateTo({
			url: '/pages/record/list'
		})
	}
	
	// 查看单条记录详情
	const viewRecord = (record) => {
		uni.navigateTo({
			url: `/pages/record/detail?id=${record.id}`
		})
	}
	
	// 跳转到血糖详细记录页面
	const goToRecordDetail = () => {
		uni.navigateTo({
			url: '/pages/bloodSugar/record'
		})
	}
	
	// 跳转到血糖提醒设置页面
	const goToReminder = () => {
		uni.navigateTo({
			url: '/pages/reminder/index?type=bloodSugar'
		})
	}
	
	// 跳转到血糖数据分析页面
	const goToAnalysis = () => {
		uni.navigateTo({
			url: '/pages/bloodSugar/analysis'
		})
	}
	
	// 监听页面显示
	onShow(() => {
		console.log('血糖首页 onShow 触发')
		// 重新加载所有数据
		loadAllData()
		
		// 检查数据一致性，尝试同步本地数据
		try {
			dataSyncService.checkDataConsistency()
		} catch (e) {
			console.error('数据一致性检查失败:', e)
		}
	})
	
	// 加载所有数据
	const loadAllData = () => {
		loadRecords()
		loadStatistics()
		if (recordList.value.length > 0) {
			setTimeout(() => {
				initChart()
				initPieChart()
			}, 500)
		}
	}
	
	// 初始化图表
	const initChart = () => {
		// 标记图表已就绪
		chartReady.value = true
		
		// 如果已经有统计数据，则直接绘制图表
		if (statistics.value && statistics.value.count > 0) {
			// 从bloodSugarStore获取额外数据
			let extraData = null
			if (bloodSugarStore && bloodSugarStore.statistics) {
				extraData = bloodSugarStore.statistics
			}
			
			// 准备图表数据
			const chartData = {
				average: parseFloat(statistics.value.average),
				max: parseFloat(statistics.value.max),
				min: parseFloat(statistics.value.min),
				count: statistics.value.count
			}
			
			// 如果有额外数据，合并进来
			if (extraData) {
				if (extraData.trend) chartData.trend = extraData.trend
				if (extraData.distribution) chartData.distribution = extraData.distribution
			}
			
			// 绘制图表
			drawChart(chartData)
		}
	}
	
	// 初始化饼图
	const initPieChart = () => {
		if (abnormalStatistics.value.length > 0) {
			drawPieChart()
		}
	}
	
	// 在初始挂载时初始化图表
	onMounted(() => {
		// 添加延迟以确保DOM已更新
		setTimeout(() => {
			chartReady.value = true
			initChart()
			initPieChart()
		}, 300)
		
		// 首次加载数据
		loadAllData()
	})
</script>

<style lang="scss">
	.blood-sugar-container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
			
			.action-btns {
				display: flex;
				align-items: center;
				
				.btn-secondary {
					background-color: #f0f2f5;
					color: #666;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					line-height: 1.5;
					margin-right: 15rpx;
				}
				
				.add-btn {
					background-color: #8cc9a1;
					color: #fff;
					font-size: 28rpx;
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
					line-height: 1.5;
				}
			}
		}
		
		// 通用卡片样式
		.stat-card, .chart-card, .period-card, .abnormal-card, .recent-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}
		
		// 统计卡片
		.stat-card {
			.stat-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.stat-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.date-filter {
					display: flex;
					background-color: #f5f5f5;
					border-radius: 30rpx;
					overflow: hidden;
					
					.filter-item {
						padding: 6rpx 20rpx;
						font-size: 24rpx;
						color: #666;
						
						&.active {
							background-color: #8cc9a1;
							color: #fff;
						}
					}
				}
			}
			
			.stat-overview {
				display: flex;
				justify-content: space-between;
				
				.stat-item {
					text-align: center;
					
					.stat-value {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 8rpx;
						
						&.value-high {
							color: #ff6b6b;
						}
						
						&.value-normal {
							color: #8cc9a1;
						}
						
						&.value-low {
							color: #5b8def;
						}
					}
					
					.stat-label {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
		
		// 图表卡片
		.chart-card {
			.chart-header {
				margin-bottom: 20rpx;
				
				.chart-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.chart-desc {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.chart-container {
				height: 400rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.chart-canvas {
					width: 100%;
					height: 100%;
				}
				
				.empty-chart {
					color: #999;
					font-size: 28rpx;
				}
			}
			
			.chart-legend {
				display: flex;
				justify-content: center;
				margin-top: 20rpx;
				
				.legend-item {
					display: flex;
					align-items: center;
					margin: 0 20rpx;
					
					.legend-color {
						width: 20rpx;
						height: 20rpx;
						border-radius: 10rpx;
						margin-right: 8rpx;
						
						&.normal {
							background-color: #8cc9a1;
						}
						
						&.high {
							background-color: #ff6b6b;
						}
						
						&.low {
							background-color: #5b8def;
						}
					}
					
					.legend-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
			
			.chart-tips {
				margin-top: 20rpx;
				padding: 16rpx;
				background-color: rgba(140, 201, 161, 0.1);
				border-radius: 8rpx;
				
				.tip-text {
					font-size: 22rpx;
					color: #8cc9a1;
					line-height: 1.4;
				}
			}
		}
		
		// 时段分析卡片
		.period-card {
			.period-header {
				margin-bottom: 20rpx;
				
				.period-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.period-desc {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.period-content {
				.period-list {
					.period-item {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						
						.period-name {
							width: 120rpx;
							font-size: 26rpx;
							color: #666;
						}
						
						.period-bar-container {
							flex: 1;
							height: 30rpx;
							background-color: #f5f5f5;
							border-radius: 15rpx;
							overflow: hidden;
							margin: 0 20rpx;
							
							.period-bar {
								height: 100%;
								border-radius: 15rpx;
								
								&.value-high {
									background-color: #ff6b6b;
								}
								
								&.value-normal {
									background-color: #8cc9a1;
								}
								
								&.value-low {
									background-color: #5b8def;
								}
							}
						}
						
						.period-value {
							width: 80rpx;
							text-align: right;
							font-size: 28rpx;
							font-weight: bold;
							
							&.value-high {
								color: #ff6b6b;
							}
							
							&.value-normal {
								color: #8cc9a1;
							}
							
							&.value-low {
								color: #5b8def;
							}
						}
					}
				}
			}
		}
		
		// 异常分析卡片
		.abnormal-card {
			.abnormal-header {
				margin-bottom: 20rpx;
				
				.abnormal-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.abnormal-desc {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.abnormal-content {
				.abnormal-pie-container {
					display: flex;
					align-items: center;
					
					.abnormal-pie {
						width: 320rpx;
						height: 320rpx;
					}
					
					.abnormal-legend {
						flex: 1;
						
						.legend-item {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;
							
							.legend-color {
								width: 24rpx;
								height: 24rpx;
								border-radius: 12rpx;
								margin-right: 10rpx;
								
								&.status-normal {
									background-color: #8cc9a1;
								}
								
								&.status-high {
									background-color: #ff6b6b;
								}
								
								&.status-low {
									background-color: #5b8def;
								}
							}
							
							.legend-text {
								font-size: 26rpx;
								color: #666;
							}
						}
					}
				}
			}
		}
		
		// 记录列表
		.recent-card {
			.recent-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.recent-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.view-all {
					font-size: 26rpx;
					color: #5b8def;
				}
			}
			
			.record-list {
				.empty-tip {
					text-align: center;
					padding: 40rpx 0;
					color: #999;
					font-size: 28rpx;
				}
				
				.record-item {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					border-bottom: 1px solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.record-info {
						.record-time {
							font-size: 28rpx;
							color: #666;
							margin-bottom: 8rpx;
						}
						
						.record-value {
							.value {
								font-size: 40rpx;
								font-weight: bold;
								
								&.value-high {
									color: #ff6b6b;
								}
								
								&.value-normal {
									color: #8cc9a1;
								}
								
								&.value-low {
									color: #5b8def;
								}
							}
							
							.unit {
								font-size: 24rpx;
								color: #999;
								margin-left: 4rpx;
							}
						}
					}
					
					.record-meta {
						text-align: right;
						
						.record-type {
							font-size: 28rpx;
							color: #666;
							margin-bottom: 8rpx;
						}
						
						.record-status {
							font-size: 24rpx;
							padding: 4rpx 16rpx;
							border-radius: 20rpx;
							
							&.status-normal {
								background-color: rgba(140, 201, 161, 0.1);
								color: #8cc9a1;
							}
							
							&.status-high {
								background-color: rgba(255, 107, 107, 0.1);
								color: #ff6b6b;
							}
							
							&.status-low {
								background-color: rgba(91, 141, 239, 0.1);
								color: #5b8def;
							}
						}
					}
				}
			}
		}
		
		// 快捷操作区
		.quick-actions {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.action-card {
				width: 22%;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				
				.action-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-bottom: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.action-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style> 